<template>
  <div>
    <h3 class="title">服务器软件层基础数据</h3>
    <div style="overflow: hidden">
<!--      <el-select v-model="value3" clearable placeholder="请选择服务器">-->
<!--        <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--        </el-option>-->
<!--      </el-select>-->
<!--      <el-button type="primary" style="margin-left: 10px;" class="el-icon-search" size="small" @click="searchServer">查询</el-button>-->
      <el-button type="primary" style="margin-left: 10px;float:right;" class="el-icon-download" size="small" @click="serverInfoExport">导出</el-button>
      <el-button type="primary" style="float: right" class="el-icon-refresh">刷新</el-button>
    </div>
    <!--  加筛选，选服务器  加单位-->
    <!--  外面的大表格-->
    <el-card class="card">
      <div slot="header" class="clearfix" style="height: 10px">
        <span><b>基础信息</b></span>
      </div>
      <!-- 修改style，表中数据加粗 2023/1/3-->
      <el-table
          class="InfoData"
          :data="baseInfo"
          :header-cell-style="this.$handleheader"
          :row-style="this.$rowstyle"
          :cell-style="this.$cellstyle"
          border
          :key="tableKey"
      >

        <!--    <el-table-column-->
        <!--        prop="id"-->
        <!--        label="编号"-->
        <!--        width="80"-->
        <!--        sortable-->
        <!--    >-->
        <!--    </el-table-column>-->
        <!-- header-align="center"为新增的居中语句 2023/1/3-->
        <el-table-column
            prop="server_os"
            label="OS版本"
            width="80"
            header-align="center"
        >
        </el-table-column>
        <el-table-column
            prop="server_kernel"
            label="内核版本"
            width="220"
            header-align="center"
        />
        <el-table-column
            prop="server_model"
            label="服务器型号"
            width="160"
            header-align="center"
        >
        </el-table-column>

        <el-table-column
            prop="server_bios"
            label="BIOS版本信息"
            width="100"
            header-align="center"
        >
        </el-table-column>
        <el-table-column
            prop="server_cpu"
            label="CPU型号"
            width="160"
            header-align="center"
        >
        </el-table-column>
        <el-table-column
            prop="server_gpu"
            label="GPU型号"
            header-align="center"
        >
        </el-table-column>
        <el-table-column
            prop="server_gpu_driver"
            label="GPU驱动"
            width="160"
            header-align="center"
        >
        </el-table-column>
      </el-table>
    </el-card>
    <!--  内存信息表格-->
    <el-card class="card">
      <div slot="header" class="clearfix"  style="height: 10px">
        <p style="display: inline"><b>内存信息</b> <p style="display: inline;margin-left: 5px;font-size: 10px">总内存=已用内存+可用内存+内存缓存</p>
      </div>
      <!-- 修改style，表中数据加粗 2023/1/3-->
      <el-table
          class="InfoData"
          :data="memo"
          :header-cell-style="this.$handleheader"
          :row-style="this.$rowstyle"
          :cell-style="this.$cellstyle"
          border
      >
        <!-- 增加:formatter，逗号分隔 2023/1/3-->
        <el-table-column
            prop="men_total"
            label="总内存(MB)"
            header-align="center"
            :formatter="stateFormat"
        >
        </el-table-column>
        <el-table-column
            prop="mem_used"
            label="已用内存(MB)"
            width="130"
            header-align="center"
            :formatter="stateFormat"
        />
        <el-table-column
            prop="mem_free"
            label="可用内存(MB)"
            width="160"
            header-align="center"
            :formatter="stateFormat"
        >
        </el-table-column>
        <el-table-column
            prop="mem_buff_cache"
            label="内存缓存(MB)"
            width="120"
            header-align="center"
            :formatter="stateFormat"
        >
        </el-table-column>
        <el-table-column
            prop="swap_total"
            label="交换内存总量(MB)"
            width="160"
            header-align="center"
            :formatter="stateFormat"
        >
        </el-table-column>
        <el-table-column
            prop="swap_used"
            label="已用交换内存(MB)"
            width="160"
            header-align="center"
            :formatter="stateFormat"
        >
        </el-table-column>
        <el-table-column
            prop="swap_free"
            label="可用交换内存(MB)"
            width="160"
            header-align="center"
            :formatter="stateFormat"
        >
        </el-table-column>
        <!-- 增加:formatter，保留两位小数 2023/1/3-->
        <el-table-column
            prop="mem_used_percent(%)"
            label="已用内存占用比(%)"
            header-align="center"
            width="180"
            :formatter="rounding"
        >
        </el-table-column>
      </el-table></el-card>
    <el-dialog
        title="导出信息填写"
        :visible.sync="exportVisible"
        width="30%"
        :show-close="false"
        :close-on-click-modal="false">

      <el-form ref="form" :model="exportForm" label-width="80px" inline :rules="exportRules">
        <el-form-item label="文件名" prop="name">
          <el-input v-model="exportForm.name"></el-input>
        </el-form-item>
<!--        <el-form-item label="高度" prop="height">-->
<!--          <el-input v-model="exportForm.height"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="宽度" prop="width">-->
<!--          <el-input v-model="exportForm.width"></el-input>-->
<!--        </el-form-item>-->
      </el-form>
<!--      <span style="color: red">*高度建议不超过500，宽度不超过1000</span>-->
      <span slot="footer" class="dialog-footer">
    <el-button @click="exportVisible = false">取 消</el-button>
    <el-button type="primary" @click="startExport('baseInfo',baseInfo,'baseInfo',memo,'memo'),exportVisible=false">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";
import ip from "@/components/ip";
import {exportMixin} from "@/components/mixin";
import {baseInfo} from "@/api/server";

export default {
  name: "uploadPageLocal",
  mixins:[exportMixin],
  data() {
    return {
      showApkUpgradeVersion: false,
      fileList: [
      ],
      timer:null,
      tableKey: null,
      baseInfo: null,
      gpuV: null,
      gpuD: null,
      memo: null,
      upgradeInfoShow: false,
      total: null,
      currentPage:1,
      pageSize: 5,
      value3:'',
      options:[],
      rules: {
        apkupgradeVersion: [
          { required: true, message: '请输入版本号', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        apkupgradeDescribe: [
          { required: true, message: '请输入说明', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        apkupgradeUser: [
          { required: true, message: '请输入更新人', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.timer = setInterval(() => {
      this.getbaseInfo()
      this.memoryInfo()
      this.tableKey = Math.random()
    },3000)

    // this.gpuDriver()
    // this.gpuVersion()
    // this.page(this.currentPage)
  },

  methods: {
    // 增加stateFormat，逗号分隔 2023/1/3
    stateFormat(row, column, cellValue) {
      cellValue += '';
      if (!cellValue.includes('.')) cellValue += '.';
      return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
        return $1 + ',';
      }).replace(/\.$/, '');
    },
    // 增加rounding，保留两位小数 2023/1/3
    rounding(row,column) {
      return parseFloat(row[column.property]).toFixed(2)
    },
    handlePreview(file) {
      console.log('hp',file);
    },
    handleChange(file, fileList) {
      this.fileList = fileList
      console.log(this.fileList);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    searchServer() {
      baseInfo(this.value3).then(res=>{
      // axios.get(this.$ip2 + '/server/base/sget?server_id=' + this.value3).then(res=>{
        console.log(res);
      })
    },
    // 获取当前系统时间
    getCurrentTime() {
      //获取当前时间并打印
      let _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      // _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
      // console.log(this.gettime)
      return yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
    },
    getbaseInfo() {
      baseInfo(this.$store.state.server.serverId).then(res=>{
      // axios.get(this.$ip2 + '/server/base/sget?server_id=' + this.$store.state.server.serverId).then(res => {
        console.log(res)
        this.baseInfo = [res.data]
      })
    },
    gpuDriver() {
      axios.get(ip + '/base/add').then(res => {
        console.log(res.data.GPU_driver)
        this.gpuD = res.data.GPU_driver
      })
    },
    //这对返回数据的处理简直了
    memoryInfo() {
      baseInfo(this.$store.state.server.serverId).then(res=>{
      // axios.get(this.$ip2 + '/server/base/sget?server_id=' + this.$store.state.server.serverId).then(res => {
        this.memo = []
        this.memo.push({
          men_total:res.data.server_ram.slice(1,-1).split(',')[0].split(':')[1],
          mem_used:res.data.server_ram.slice(1,-1).split(',')[1].split(':')[1],
          mem_free:res.data.server_ram.slice(1,-1).split(',')[2].split(':')[1],
          mem_buff_cache:res.data.server_ram.slice(1,-1).split(',')[3].split(':')[1],
          swap_total:res.data.server_ram.slice(1,-1).split(',')[4].split(':')[1],
          swap_used:res.data.server_ram.slice(1,-1).split(',')[5].split(':')[1],
          swap_free:res.data.server_ram.slice(1,-1).split(',')[6].split(':')[1],
          'mem_used_percent(%)':parseFloat(res.data.server_ram.slice(1,-1).split(',')[7].split(':')[1]).toFixed(2),
        })
        console.log('memo???',this.memo)
        // console.log('kankan',res.data.server_ram.slice(1,-1).split(',')[0].split(':')[1])
        console.log('llll',res.data.server_ram)
      })
    },
    serverInfoExport() {
      this.exportVisible = true
    },
  }
}
</script>

<style scoped>
.card{
  position: relative;
  width: 99%;
  max-width: 99%;
  padding: 10px 10px 0;
  margin: 10px auto;
  overflow: hidden;
  border: solid white;
}


/*h3{*/
/*  margin-left: 150px;*/
/*}*/
</style>
